<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reAgain.css"/>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="title">
    <h1>Today</h1>
    <h3 class="title2">Monday 8,August</h3>
</div>

<div class="week">

</div>
<ul id="ul">

</ul>

<script>
    /**
     * TODO LIST
     * 1. 星期一 ~ 星期日选用其它的标签实现。    √
     * 2. 星期一 ~ 星期日不应该有点击状态        √
     * 3. 样式和原图看齐                        √
     * 4. 通用样式不以JS添加，使用CSS样式表书写  √
     * 5. 点击区域为li，样式添加到li归属的span上 ×
     * 6. 仅有日期点击会变绿                    √
     */
    var weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var $week = $('.week');
    for (var i = 0; i < 7; i++) {
        $week.append($('<p></p>'));
        $('p').eq(i).text(weekDays[i]);
    }


    var max = 5 * 7;
    var $ul = $('ul');
    for (i = 0; i < max; i++) {
        $ul.append($('<li><span></span></li>'))
    }
    for (i = 1; i < 32; i++) {
        $('span').eq(i).text('' + i);
    }

    var spans = $('span');
    const $spans = $(spans);


    function myFind(event) {
        var tar = event.target;
        var $tar = $(tar);
        if (tar.tagName === 'SPAN') {
            return $tar;
        } else {
            var $span = $tar.find('span');
            return $span;
        }
    }

    var last = null;
    var onMouseDown = function (event) {


        var $span = myFind(event);

        if (!$span.text()) {
            return;
        }

        if (last) {
            last.removeClass('active');
        }

        $span.addClass('active');
        last = $span;
    };


    $('li').click(function (event) {
        onMouseDown(event);
    })


    // spans.eq(j).css('color', 'rgb(201,210,206)');
    // spans.eq(j).text('' + i);
    // spans.eq(j).css('marginLeft', '25px');
    // spans.eq(j).css('fontWeight', '1000');
    // spans.eq(j).css('fontSize', '23px');
    // spans.eq(j).css('marginLeft', '30px');
</script>
</body>
</html>